<template>
  <div class="upgrade-content"
       v-if="typeList.length > 0">
    <!-- 切换大分类 -->
    <div class="upgrade-type flex">
      <div class="type-item flex-sub"
           v-for="(item,index) in typeList"
           :key="'type'+item.id"
           @click="selectTypeIndex = index">
        <img class="type-img"
             v-show="selectTypeIndex !== index"
             :src="item.img" />
        <img class="type-img"
             v-show="selectTypeIndex === index"
             :src="item.logo" />
      </div>
    </div>

    <banner :banners="banners"></banner>

    <!-- 商品详情 -->
    <page-bottom class="goods-desc"
                 :more="false"
                 noMoreText="礼品详情"></page-bottom>
    <!-- <div class="goods-desc-swiper">
      <swiper class="desc-swiper"
              :options="goodsDescSwiperOption"
              ref="goodsDescBanner">
        <swiper-slide v-for="item in typeList"
                      :key="'type_content_'+item.id"
                      class="desc-swiper-item">
          <div v-html="item.content"></div>
        </swiper-slide>
      </swiper>
    </div> -->

    <div class="goods-desc-detail"
         v-html="typeList[selectTypeIndex].content"></div>

    <div class="float-btn-content">
      <van-button block
                  round
                  class="float-main-btn"
                  @click="showGoodsList= true">云直播直播间支付（{{typeList[selectTypeIndex].price}}）元</van-button>
    </div>

    <!-- 底部 -->
    <!-- 贴底按钮 -->
    <!-- <footer class="footer">
      <van-button block
                  class="fixed-button van-tabbar--fixed"
                  @click="showGoodsList= true">
        云直播直播间支付（{{typeList[selectTypeIndex].price}}）元
      </van-button>
    </footer> -->

    <van-popup v-model="showGoodsList"
               round
               position="bottom"
               closeable
               close-icon="close">
      <!-- 标题 -->
      <page-bottom class="popup-title"
                   :more="false"
                   noMoreText="请选择礼品"></page-bottom>
      <!-- 列表区 -->
      <van-radio-group v-model="selectGoodsId"
                       class="popup-goods-list">
        <van-cell-group>
          <van-cell :title="item.goods_name"
                    clickable
                    @click="selectGoodsId = item.goods_id"
                    v-for="item in goodsList"
                    :key="'goods_item_'+item.goods_id">
            <van-radio slot="right-icon"
                       :name="item.goods_id"
                       checked-color="#fff" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>

      <!-- 确认按钮 -->
      <van-button block
                  class="fixed-button"
                  @click="toPay">
        云直播直播间支付（{{typeList[selectTypeIndex].price}}）元
      </van-button>
    </van-popup>
  </div>
</template>

<script>
import PageBottom from '@/components/PageBottom'
import Banner from '@/components/Banner'
import { upgradePackageList, upgradePackageInfo } from '@/api/fcMemberSendGift'
import { getAdById } from '@/api/common'
import { Toast } from 'vant'
import { mapState } from 'vuex'
import { callAppFunction } from '@/utils/utils'
export default {
  name: 'Upgrade',
  data() {
    const self = this
    return {
      selectTypeIndex: 0, // 当前选中的类型
      swpierGoodsIndex: 0, // 当前滑块商品索引
      showGoodsList: false, // 显示全部商品列表
      selectGoodsId: null, // 当前选中的商品ID
      typeList: [], // 套餐分类列表
      goodsList: [], // 对应分类商品列表
      banners: [], // 广告位
      goodsDescSwiperOption: Object.freeze({
        autoplay: false,
        loop: true,
        on: {
          // 滑动之后回调函数
          slideChangeTransitionStart: function() {
            self.selectTypeIndex = this.realIndex
          }
        }
      })
    }
  },
  components: {
    PageBottom,
    Banner
  },
  watch: {
    // 监听轮播图切换，描述也跟着切换
    selectTypeIndex(newVal, oldVal) {
      // this.$refs.goodsBanner.swiper.slideToLoop(newVal, 1000, false)
      this.$refs.goodsDescBanner.swiper.slideToLoop(newVal, 1000, false)
      // 切换了分类。重新查询商品列表
      this.getGoodsListById()
    }
  },

  computed: {
    ...mapState({
      token: state => state.user.token, // 用户登陆信息
      user: state => state.user.info
    })
  },

  created() {
    Toast.loading({
      duration: 0, // 持续展示 toast
      message: '加载中'
    })
    // 获取顶部的套餐列表
    this.initPageInfo()
    // 获取轮播广告
    this.getAdList()
  },
  methods: {
    /**
     * 去支付
     */
    toPay() {
      if (this.token) {
        if (this.selectGoodsId) {
          let makeOrderUrl = encodeURI(`${window.location.origin}${window.location.pathname}#/member/makeOrder?buy_now=1&cart_id=${this.selectGoodsId}|1`)
          if (callAppFunction('appOpenNewPage', { url: makeOrderUrl })) {
            // 如果app已经跳转了。H5则不用在做处理
            return false
          }
          this.$router.push({
            name: 'MakeOrder',
            query: { buy_now: 1, cart_id: `${this.selectGoodsId}|1` }
          })
        } else {
          this.$toast({
            message: '请选择一个商品',
            type: 'loading'
          })
        }
      } else {
        Toast({
          message: '请先登录',
          duration: 2000,
          onClose: () => {
            this.$router.push({ name: 'HomeLogin' })
          }
        })
      }
    },
    /**
     * 获取顶部的套餐列表
     * 获取对应套餐的商品列表
     */
    initPageInfo() {
      upgradePackageList()
        .then(res => {
          this.typeList = res.result
          if (this.typeList && this.typeList.length > 0) {
            this.getGoodsListById()
          }
          Toast.clear()
        })
        .catch(res => {
          Toast.loading(res.message)
        })
    },

    /**
     * 根据套餐分类ID获取商品列表
     * @param 对应分类的商品类型
     */
    getGoodsListById() {
      upgradePackageInfo(this.typeList[this.selectTypeIndex].id || 0)
        .then(res => {
          this.goodsList = res.result[0].goods
        })
        .catch(res => {
          Toast.loading(res.message)
        })
    },

    /**
     * 获取轮播广告图
     */
    getAdList() {
      // 100 对应 499 活动商品的广告
      getAdById(100).then(res => {
        this.banners = res.result.banners
      })
    }
  }
}
</script>

<style lang="scss">
.upgrade-content {
  .upgrade-type {
    padding: 15px;
    .type-item {
      .type-img {
        width: 100%;
      }
      & + .type-item {
        margin-left: 9px;
      }
    }
  }

  // 轮播图
  .banner-container {
    width: 100%;
    padding: 0 10px 10px 10px;
    border-radius: 10px;
    position: relative;
    .banner {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      .banner-item {
        width: 100%;
        img {
          width: 100%;
          height: 170px;
        }
      }
    }
    .banner-pagination {
      position: absolute;
      bottom: 15px;
      left: 0;
      width: 100%;
      z-index: 100;
      text-align: center;
      /deep/ .swiper-pagination-bullet {
        margin-right: 5px;
        background-color: #ffffff;
        opacity: 0.6;
      }
      /deep/ .swiper-pagination-bullet-active {
        width: 15px;
        height: 8px;
        border-radius: 4px;
        background-color: #ffffff;
        opacity: 1;
      }
    }
  }

  .goods-desc {
    .text {
      color: #38373d;
      font-size: 18px;
    }
  }

  .goods-desc-detail {
    width: 100%;
    font-size: 16px;
    color: #666666;
    line-height: 1.5;
    img {
      width: 100%;
    }
  }

  .goods-desc-swiper {
    width: 100%;
    .desc-swiper {
      width: 100%;
      .desc-swiper-item {
        width: 100%;
        font-size: 16px;
        color: #666666;
        line-height: 1.5;
        img {
          width: 100%;
        }
      }
    }
  }

  .float-btn-content {
    height: 90px;
    .float-main-btn {
      width: 90%;
      position: fixed;
      left: 5%;
      bottom: 73px;
      z-index: 1000;
      background-color: $mainColor;
      color: #ffffff;
      border-color: $mainColor;
    }
  }

  .footer {
    height: 45px;
  }
  .fixed-button {
    height: 44px;
    z-index: 300;
    background-color: $mainColor;
    color: #ffffff;
  }

  .popup-title {
    height: 60px;
    .text {
      font-size: 18px;
      color: #38373d;
    }
  }
  .popup-goods-list {
    /deep/ .van-popup__close-icon--top-right {
      top: 20px;
    }

    /deep/ .van-radio__icon {
      .van-icon {
        border-color: #ffffff;
      }
    }

    /deep/ .van-radio__icon--checked .van-icon {
      color: $mainColor;
    }
  }
}
</style>
